﻿$(function () {
    var rand = parseInt(10000 * Math.random());
    var path = "/Content/userImgs/Product/Transition" + rand;
    $("#TransitionPath").val(path);
    $('.picker').mouseenter(function () {
        $(this).css('background-image', 'url("/Content/webImgs/upLogo/cp_img_tj_a.png")');
    }).mouseleave(function () {
        $(this).css('background-image', 'url("/Content/webImgs/upLogo/cp_img_tj.png")');
    })
   
     var uploader = WebUploader.create({
         // swf文件路径
         //swf: BASE_URL + '/js/Uploader.swf',
         // 文件接收服务端。
         //server: 'DBH/UploadImgPath' + "?path=" + path + "&fname=ImageUrl1",

         server: '/Upload/Upload/',
         // 选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
         pick: {
             id: '#picker',
             multiple: false
         },
         accept: {
             title: 'Images',
             extensions: 'gif,jpg,jpeg,bmp,png',
             mimeTypes: 'image/jpg,image/jpeg,image/png'
         },
         // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
         resize: false
     });


     var uploader1 = WebUploader.create({
         //server: 'DBH/UploadImgPath' + "?path=" + path + "&fname=ImageUrl2",
         server:'/Upload/Upload/',
         pick: {
             id: '#picker1',
             multiple: false
         },
         accept: {
             title: 'Images',
             extensions: 'gif,jpg,jpeg,bmp,png',
             mimeTypes: 'image/jpg,image/jpeg,image/png'
         },
         resize: false
     });
     var uploader2 = WebUploader.create({
         //server: 'DBH/UploadImgPath' + "?path=" + path + "&fname=ImageUrl3",
         server: '/Upload/Upload/',
         pick: {
             id: '#picker2',
             multiple: false
         },
         accept: {
             title: 'Images',
             extensions: 'gif,jpg,jpeg,bmp,png',
             mimeTypes: 'image/jpg,image/jpeg,image/png'
         },
         resize: false
     });
     var uploader3 = WebUploader.create({
         //server: 'DBH/UploadImgPath' + "?path=" + path + "&fname=ImageUrl4",
         server: '/Upload/Upload/',
         pick: {
             id: '#picker3',
             multiple: false
         },
         accept: {
             title: 'Images',
             extensions: 'gif,jpg,jpeg,bmp,png',
             mimeTypes: 'image/jpg,image/jpeg,image/png'
         },
         resize: false
     });
     var uploader4 = WebUploader.create({
         //server: 'DBH/UploadImgPath' + "?path=" + path + "&fname=ImageUrl5",
         server: '/Upload/Upload/',
         pick: {
             id: '#picker4',
             multiple: false
         },
         accept: {
             title: 'Images',
             extensions: 'gif,jpg,jpeg,bmp,png',
             mimeTypes: 'image/jpg,image/jpeg,image/png'
         },
         resize: false
     });

    

     function LoadItem(item, con, selector) {
         var EditImgUrl = $(selector).next('input[type="hidden"]').val();

         if (EditImgUrl !="")
         {
             var $li = $(
              '<div  class="img-thumbnail">' +
              '<img src="' + EditImgUrl + '" alt="null" style="width:60px;height:60px;border-radius:4px;"/></div>');
             $(selector).before($li);
             $(selector).hide();

             $(con + '> div.img-thumbnail').mouseenter(function () {
                 var url = $(this).find('img').attr('src');
                 $(this).attr('name', url).find('img').attr('src', '/Content/webImgs/upLogo/cp_img_sc.png').css({ 'width': '60px', 'height': '60px', 'border-radius': '4px' });
             }).mouseleave(function () {
                 var url = $(this).attr('name');
                 $(this).find('img').attr('src', url);
             }).click(function () {
                 $(this).remove();
                 $(selector).show();
                 $(selector).next('input[type="hidden"]').val("");
             });
         }
       
         // 当有文件被添加进队列的时候
         item.on('fileQueued', function (file) {
             var $li = $(
                '<div  id="' + file.id + '" class="img-thumbnail">' +
                '<img alt="null"/ style="width:60px;height:60px;border-radius:4px;">' +
                '</div>'
            ),
            $img = $li.find('img');
            $(selector).before($li);
            item.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 60, 60);

             $(con + '> div.img-thumbnail').mouseenter(function () {
                var url = $(this).find('img').attr('src');
                $(this).attr('name', url).find('img').attr('src', '/Content/webImgs/upLogo/cp_img_sc.png').css({ 'width': '60px', 'height': '60px' ,'border-radius': '4px'});
            }).mouseleave(function () {
                var url = $(this).attr('name');
                $(this).find('img').attr('src', url);
            }).click(function () {
                $(this).remove();
                $(selector).show();
                $(selector).next('input[type="hidden"]').val("");
                $.ajax({
                    type: "post",
                    url: 'DBH/DelFile' + "?path="+    $(con).children('input[type="hidden"]').val(),
                    success: function (data) {
                        //console.log(data);
                    }
                });
            });
            $(selector).hide();
            item.upload();
        });

         // 文件上传过程中创建进度条实时显示。
         item.on('uploadProgress', function (file, percentage) {
             var $li = $('#' + file.id),
                 $percent = $li.find('.progress .progress-bar');

             // 避免重复创建
             if (!$percent.length) {
                 $percent = $('<div class="progress progress-striped active" style="margin:0;height:8px">' +
                   '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                   '</div>' +
                 '</div>').appendTo($li).find('.progress-bar');
             }

             //$li.find('p.state').text('上传中');

             $percent.css('width', percentage * 100 + '%');
         });
         item.on('uploadSuccess', function (file, r) {

             
             var result = r._raw;
             var imgurl = result.split("。")[1]; //上传图片的路径
             $(con).children('input[type="hidden"]').val(imgurl);
            
         });

         item.on('uploadError', function (file) {
             //$('#' + file.id).find('p.state').text('上传出错');
         });

         item.on('uploadComplete', function (file) {
             $('#' + file.id).find('.progress').fadeOut();
         });
         $('#UpLoad').click(function () {
             item.upload();
         })
     }
     LoadItem(uploader, ".list-con", "#picker");
     LoadItem(uploader1, ".list-con1", "#picker1");
     LoadItem(uploader2, ".list-con2", "#picker2");
     LoadItem(uploader3, ".list-con3", "#picker3");
     LoadItem(uploader4, ".list-con4", "#picker4"); 
 });





   